import {addPoetry} from "@/api/poetry";
import { useState,useEffect } from "react";
import {resType} from "@/commonType";
import CTable from "@/components/commonTable";
import CDialog from "@/components/commonDialog";
import { Button,message,Modal,Upload } from "antd";
import { InboxOutlined } from '@ant-design/icons';
const { Dragger } = Upload;
import type { UploadProps } from 'antd';
import type { TableColumnsType, TableProps } from 'antd';
type TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;
type TablePaginationPosition<T extends object> = NonNullable<
  TablePagination<T>['position']
>[number];
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
    key: React.ReactNode;
    title: string;
    tags: string;
    type: string;
    paragraphs:string;
    author: string;
    biography: string;
    rhythmic: string;
    prologue: string;
}
const columns = [
    {
        title:"标题",
        dataIndex:"title",
        key:"title",
        searchable:true,
    },
    {
        title:"作者",
        dataIndex:"author",
        key:"author",
    },
    {
        title:"类型",
        dataIndex:"type",
        key:"type",
        render: (type:string) => {
            return <a>{type=='1'?'唐诗':'其他'}</a>
        }

     },
    {
        title:"菜单url",
        dataIndex:"paragraphs",
        key:"paragraphs",
    },
    {
        title:"词牌名",
        dataIndex:"rhythmic",
        key:"rhythmic",
    },
    {
        title:"序",
        dataIndex:"prologue",
        key:"prologue",
    },
    {
        title:"标签",
        dataIndex:"tags",
        key:"tags",
    },
    {
        title:"传记",
        dataIndex:"biography",
        key:"biography",
    },
    {
        title:"操作",
        dataIndex: "action",
        key: "action",
        render: (text:any, record:any) => {
            console.log(text,record);
            return  <>
                        <Button onClick={()=>{
                            editMenu(record);
                        }} type="primary" style={{marginRight:10}}>编辑</Button>
                        <Button onClick={()=>{
                            deleteMenu(record);
                        }} danger type="primary">删除</Button>
                    </>;
        },
    }
]
const options = [
    {
        type: 'input',
        label: '诗名（标题）',
        name:"title",
        placeholder:"请输入诗名",
    },
    {
        type: 'select',
        label: '古诗类型',
        name:"type",
        placeholder:"请选择菜单类型",
        options:[
            {value:'0',label:'唐诗'},
            {value:'1',label:'宋词'},
            {value:'2',label:'元曲'},
            {value:'3',label:'明诗'},
            {value:'4',label:'清诗'},
            {value:'5',label:'宋诗'},
            {value:'6',label:'五代诗词'},
            {value:'7',label:'四书五经'},
            {value:'8',label:'其他'},
        ],
    },
    {
        type: 'input',
        label: '标签',
        name:"tags",
        placeholder:"请输入标签",
    },
    {
        type: 'input',
        label: '内容',
        name:"paragraphs",
        placeholder:"请输入内容",
    },
    {
        type: 'input',
        label: '传记',
        name:"biography",
        placeholder:"请输入传记",
    },
    {
        type: 'input',
        label: '序',
        name:"prologue",
        placeholder:"请输入传记",
    },
    {
        type: 'input',
        label: '词牌名',
        name:"rhythmic",
        placeholder:"请输入传记",
    },
    {
        type: 'input',
        label: '作者',
        name:"author",
        placeholder:"请输入作者",
    }
]

const editMenu = (record:DataType)=>{

}
const deleteMenu = (record:DataType)=>{

}
const Tang:React.FC = ()=>{
    const [poetryList,setPoetryList] = useState<DataType[]>([]);
    const [dialogVisible, setDialogVisible] = useState(false);
    const [dialogUploadVisible, setDialogUploadVisible] = useState(false);

    const [dialogForm, setDialogForm] = useState({
        title: "string",
        tags:[],
        type:"",
        paragraphs:[],
        author:"",
        biography:"",
        rhythmic:"",
        prologue:""
    });
    const uploadProps: UploadProps = {
        name: 'file',
        multiple: true,
        action: '',
        beforeUpload: (file) => {
            return false;
        },
        onRemove: (file) => {
          console.log(file,'file')
        },
        onChange(info) {
            console.log(info,'info');
            
        },
        onDrop(e) {
          console.log('Dropped files', e.dataTransfer.files);
        },
      };
    const search = (info:any)=>{
        console.log(info);
    }
    const addMenu = ()=>{
        setDialogVisible(true);
    }
    const submit = (form:any)=>{
        console.log(form,'form')
        addPoetry(form).then((res:any)=>{
            if(res.code==200){
                message.success("添加成功");
                setDialogVisible(false);
            }
        })
    }
    const cancelDialog = ()=>{
        setDialogVisible(false);
    }
    const handleUpload = ()=>{
        setDialogUploadVisible(true);
    }
    const handleOkUpload = ()=>{

    }
    const onCancelUpload = ()=>{
        setDialogUploadVisible(false);
    }
    return  <>
                <CTable
                    dataSource={poetryList}
                    columns={columns}
                    pagination={false}
                    role={["add","edit","delete"]}
                    searchable={true}
                    rowKey="poetry_id"
                    search={(info)=>{search(info)}}
                    add={()=>{addMenu()}}
                    opBtns={[
                        <Button onClick={()=>{handleUpload()}}>导入</Button>
                    ]}
                ></CTable>
                <CDialog 
                    title="新增菜单"
                    onOk={(form)=>{submit(form)}}
                    onCancel={()=>{cancelDialog()}}
                    visible={dialogVisible}
                    width={600}
                    form={dialogForm}
                    options={options}
                />
                <Modal
                    title="导入古诗"
                    open={dialogUploadVisible}
                    onOk={()=>{
                        handleOkUpload();
                    }
                        
                    }
                    onCancel={()=>{
                        onCancelUpload();
                    }}
                    okText="确定"
                    cancelText="取消"
                    width={600}
                    
                >
                    <Dragger {...uploadProps}>
                        <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                        </p>
                        <p className="ant-upload-text">Click or drag file to this area to upload</p>
                        <p className="ant-upload-hint">
                        Support for a single or bulk upload. Strictly prohibited from uploading company data or other
                        banned files.
                        </p>
                    </Dragger>

                </Modal>
            </>
}
export default Tang;